import React, { Component } from 'react'
import { Statistic, Card, Row, Col, message } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, LikeOutlined } from '@ant-design/icons'
import {
    requestSellTotal,
    requestShopUnload,
    requestShopTotal,
    requestUserTotal,
    requestUserBack,
    requestGoodComments
} from '../../api/statistic'
import QueueAnim from 'rc-queue-anim'
import { connect } from 'react-redux'
import Sale from './chart/Sale'

class Home extends Component {
    state = {
        show: true,
        sales: 0,
        users: 0,
        shops: 0,
        unload: 0,
        comments: 0,
        backuser: 0,
        offset: -20
    }

    componentDidMount () {
        let token = sessionStorage.getItem('token')
        if (!token) {
            message.warn('检测未登录')
        }
        this.init()
    }

    init () {
        const request = [requestSellTotal(), requestUserTotal(), requestShopTotal(), requestShopUnload(), requestGoodComments(), requestUserBack()]
        Promise.all(request).then(res => {
            const [sales, users, shops, unload, comments, backuser] = res.map(item => item.count)
            this.setState({
                sales,
                users,
                shops,
                unload,
                comments,
                backuser
            })
        })
    }

    render () {
        return (<QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a"><Row gutter={[16, 20]}>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="销量"
                            value={this.state.sales}
                            valueStyle={{ color: '#3f8600' }}
                            prefix={<ArrowUpOutlined/>}
                            suffix="件"
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="下架/缺货"
                            value={this.state.unload}
                            valueStyle={{ color: '#cf1322' }}
                            prefix={<ArrowDownOutlined/>}
                            suffix="件"
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic title="商品总数" value={this.state.shops} suffix="件"/>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic title="用户总数" value={this.state.users} suffix="人"/>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic title="好评数" value={this.state.comments} prefix={<LikeOutlined/>} suffix="%"/>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic title="回头客" value={this.state.backuser} suffix="人"/>
                    </Card>
                </Col>
            </Row>
                <Sale style={{ marginLeft: this.state.offset }}/>
            </div> : null}
        </QueueAnim>)
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Home)
